<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统日志</title>
  <style>
  html,body{
      width:calc(100% - 20px);
      height:calc(100% - 20px);
      padding:0;
      margin:0;
      font-size:14px;
  }
    body{
      padding: 10px;
      color: white;
      background: black;
    }
    .classnametext{
      color: #00AA00;
    }
    .infotext{
      color: white;
      display: inline-block;
      width: 60px;
    }
    .debugtext{
      color: antiquewhite;
      display: inline-block;
      width: 60px;
    }
    .warntext{
      color: #FFB800;
      display: inline-block;
      width: 60px;
    }
    .errortext{
      color: #FD482C;
      display: inline-block;
      width: 60px;
    }
    button{
        width:100px;
        padding:5px;
        font-size:1em;
    }
  </style>
</head>
<body>
    <div>
        <button id="btn">暂停</button>
        <button id="clear">清空</button>
        <span id="status"></span>
    </div>

    <div id="log-container" style="height: calc(100% - 30px );overflow: auto;">
        <div></div>
    </div>

  <script src="/socket/sockjs.js"></script>
  <script src="/socket/stomp.js"></script>
  <script src="/admin/js/jquery.min.js"></script>
<script>
    $(function(){
        var stompClient = null;

        function openSocket() {

            if (stompClient == null) {

                $("#status").text("通道连接成功,静默等待.....");
                var socket = new SockJS('/websocket');

                stompClient = Stomp.over(socket);

                stompClient.connect({token: "kl"}, function (frame) {

                    stompClient.subscribe('/topic/pullLogger', function (event) {

                        var content = JSON.parse(event.body);

                        var leverhtml = '';

                        var className = '<span class="classnametext">' + content.className + '</span>';

                        switch (content.level) {

                            case 'INFO':

                                leverhtml = '<span class="infotext">' + content.level + '</span>';

                                break;

                            case 'DEBUG':

                                leverhtml = '<span class="debugtext">' + content.level + '</span>';

                                break;

                            case 'WARN':

                                leverhtml = '<span class="warntext">' + content.level + '</span>';

                                break;

                            case 'ERROR':

                                leverhtml = '<span class="errortext">' + content.level + '</span>';

                                break;

                        }

                        $("#log-container div").append("<p class='logp'>" + content.timestamp + " " + leverhtml + " --- [" + content.threadName + "] " + className + " ：" + content.body + "</p>");

                        if (content.exception != "") {

                            $("#log-container div").append("<p class='logp'>" + content.exception + "</p>");

                        }

                        if (content.cause != "") {

                            $("#log-container div").append("<p class='logp'>" + content.cause + "</p>");

                        }

                        $("#log-container").scrollTop($("#log-container").prop("scrollHeight"));

                    }, {



                    });

                });

            }

        }

        openSocket();


        function closeSocket() {

            if (stompClient != null) {

                stompClient.disconnect();

                stompClient = null;

            }

        }

        $("#btn").click(function(){
            var text = $(this).text();
            if(text == "暂停"){
                closeSocket();
                $("#status").text("通道暂停成功,静默等待.....");
                $(this).text("启动");
            }else{
                openSocket();
                $(this).text("暂停");
            }
        });

        $("#clear").click(function(){
            $("#log-container div").empty();
        });
    });


</script>
</body>
</html>
